<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-left">
        <div class="branding">
          <h1>欢迎回家</h1>
          <p>阳光 · 帅气 · 向上</p>
        </div>
        <div class="illustration">
          <img src="@/assets/login/login_login.svg" alt="Login Illustration" />
        </div>
      </div>
      <div class="login-right">
        <div class="login-card">
          <div class="login-header">
            <h2>欢迎回来</h2>
            <p>请登录您的账户</p>
          </div>
          <form @submit.prevent="handleSubmit" class="login-form">
            <div class="form-group">
              <label for="username">邮箱</label>
              <div class="input-wrapper" :class="{ 'input-error': errors.email }">
                <!-- <svg-icon name="user" class="input-icon"></svg-icon> -->
                <input
                  id="email"
                  v-model="form.email"
                  type="text"
                  placeholder="请输入邮箱"
                  autocomplete="email"
                />
              </div>
              <div v-if="errors.email" class="error-message">
                <!-- <svg-icon name="warning" class="error-icon"></svg-icon> -->
                {{ errors.email }}
              </div>
            </div>
            <div class="form-group">
              <label for="username">用户名</label>
              <div class="input-wrapper" :class="{ 'input-error': errors.username }">
                <!-- <svg-icon name="user" class="input-icon"></svg-icon> -->
                <input
                  id="username"
                  v-model="form.username"
                  type="text"
                  placeholder="请输入用户名"
                  autocomplete="username"
                />
              </div>
              <div v-if="errors.username" class="error-message">
                <!-- <svg-icon name="warning" class="error-icon"></svg-icon> -->
                {{ errors.username }}
              </div>
            </div>

            <div class="form-group">
              <label for="password">密码</label>
              <div class="input-wrapper" :class="{ 'input-error': errors.password }">
                <!-- <svg-icon name="lock" class="input-icon"></svg-icon> -->
                <input
                  id="password"
                  v-model="form.password"
                  type="password"
                  placeholder="请输入密码"
                  autocomplete="current-password"
                />
                <button type="button" class="password-toggle" @click="togglePasswordVisibility">
                  <!-- <svg-icon :name="showPassword ? 'eye-off' : 'eye'"></svg-icon> -->
                </button>
              </div>
              <div v-if="errors.password" class="error-message">
                <!-- <svg-icon name="warning" class="error-icon"></svg-icon> -->
                {{ errors.password }}
              </div>
            </div>

            <div class="form-options">
              <label class="remember-me">
                <input type="checkbox" v-model="rememberMe" />
                <span class="checkmark"></span>
                记住我
              </label>
              <router-link to="/forgot-password" class="forgot-password"> 忘记密码? </router-link>
            </div>

            <button
              type="submit"
              class="login-button"
              :disabled="isSubmitting"
              :class="{ loading: isSubmitting }"
            >
              <span>登录</span>
              <span v-if="isSubmitting" class="loading-spinner"></span>
            </button>
          </form>
          <div class="login-footer">
            还没有账号? <router-link to="/register">立即注册</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { login } from '@/api/index'
import { reactive, ref, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter, useRoute } from 'vue-router'
import { useMenuStore } from '@/stores/menu'
const userStore = useUserStore()
const menuStore = useMenuStore()
const form = reactive({
  username: 'ganyunfei',
  password: 'bolaa2021',
  email: '2394786768@qq.com'
})
const errors = reactive({
  username: '',
  password: '',
  email: ''
})
const router = useRouter()
const route = useRoute()
const rememberMe = ref(false)
const showPassword = ref(false)
const isSubmitting = ref(false)

const handleSubmit = async () => {
  isSubmitting.value = true
  await login(form)
    .then((res: any) => {
      if (res.code === 200) {
        userStore.login({ info: res.data, token: res.token })
      } else {
        ElMessage({
          message: '登录失败!',
          type: 'error'
        })
        isSubmitting.value = false
        return
      }
    })
    .catch(() => {
      isSubmitting.value = false
      return
    })
  if (!userStore.userInfo) {
    return
  }
  // 获取菜单
  await menuStore.getMenuList()
  ElMessage({
    message: '登录成功!',
    type: 'success'
  })
  const path = userStore.oldRoute || '/home'
  router.push({
    path
  })
}

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}
</script>
<style lang="less" scoped>
.login-page {
  height: 100vh;
  display: flex;
  background-color: #f8fafc;
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

.login-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.login-left {
  flex: 1;
  // background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
  background-image: url('@/assets/login/login_bg.jpg');
  background-size: 100% 100%;
  color: white;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.branding {
  color: #4361ee;
  h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  p {
    font-size: 1rem;
    opacity: 0.9;
  }
}

.illustration {
  text-align: center;
  margin-top: 2rem;

  img {
    max-width: 80%;
    height: auto;
  }
}

.login-right {
  width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.05);
}

.login-card {
  width: 100%;
  max-width: 360px;
  padding: 0 1rem;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;

  h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
  }

  p {
    color: #64748b;
    font-size: 0.875rem;
  }
}

.login-form {
  .form-group {
    margin-bottom: 1.25rem;

    label {
      display: block;
      font-size: 0.875rem;
      color: #475569;
      margin-bottom: 0.5rem;
      font-weight: 500;
    }
  }
}

.input-wrapper {
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;

  &:hover {
    border-color: #94a3b8;
  }

  &:focus-within {
    border-color: #4361ee;
    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
  }

  &.input-error {
    border-color: #ef4444;

    &:focus-within {
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }
  }
}

.input-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.75rem;
  color: #94a3b8;
}

input {
  flex: 1;
  padding: 0.625rem 0.75rem;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  color: #1e293b;

  &::placeholder {
    color: #94a3b8;
  }
}

.password-toggle {
  background: none;
  border: none;
  padding: 0 0.75rem;
  cursor: pointer;
  color: #94a3b8;

  &:hover {
    color: #64748b;
  }
}

.error-message {
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #ef4444;
}

.error-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}

.remember-me {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #475569;

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .checkmark {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.25rem;
    background-color: white;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      display: none;
      left: 0.3125rem;
      top: 0.125rem;
      width: 0.25rem;
      height: 0.5rem;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
  }

  input:checked ~ .checkmark {
    background-color: #4361ee;
    border-color: #4361ee;

    &:after {
      display: block;
    }
  }
}

.forgot-password {
  color: #4361ee;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.login-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #4361ee;
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 1.5rem;

  &:hover {
    background-color: #3a56d4;
  }

  &:disabled {
    background-color: #e2e8f0;
    cursor: not-allowed;
  }

  &.loading {
    position: relative;
    color: transparent;
  }
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: #94a3b8;
  font-size: 0.75rem;

  &:before,
  &:after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
  }

  span {
    padding: 0 0.75rem;
  }
}

.social-login {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.social-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background-color: white;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background-color: #f8fafc;
  }

  svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }

  &.wechat {
    color: #07c160;
  }

  &.dingtalk {
    color: #0084ff;
  }
}

.login-footer {
  text-align: center;
  font-size: 0.875rem;
  color: #64748b;

  a {
    color: #4361ee;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
